<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改商品 - 校园二手市场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        /* 共用样式（与发布页面一致） */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun",
            "Times New Roman", serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 5px auto;
            padding: 0 15px;
            flex: 1;
        }

        /* 头部样式（与发布页面一致） */
        .header {
            background-color: #2c3e50;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo h1 {
            font-size: 2.5rem;
            display: flex;
            align-items: center;
            font-weight: 700;
            min-width: 400px;
            letter-spacing: 2px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .logo i.fa-recycle {
            font-size: 2.5rem;
            margin-right: 15px;
            vertical-align: middle;
            color: #e74c3c;
        }

        .user-menu ul {
            display: flex;
            list-style: none;
        }

        .user-menu li {
            margin-left: 20px;
            min-width: 100px;
        }

        .user-menu a {
            display: flex;
            align-items: center;
            font-size: 15px;
            font-weight: 500;
            transition: color 0.3s;
            padding: 8px 0;
        }

        .user-menu a:hover {
            color: #e74c3c;
            transition: color 0.3s;
        }

        .user-menu i {
            margin-right: 8px;
            font-size: 1.1rem;
        }

        /* 上传表单样式 - 调整为更紧凑的布局 */
        .upload-container {
            background-color: white;
            padding: 30px;
            margin: 30px auto;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            max-width: 900px;
        }

        .upload-title {
            text-align: center;
            margin-bottom: 20px;
            color: #2c3e50;
            font-size: 1.6rem;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 500;
            color: #2c3e50;
            font-size: 14px;
        }

        .form-group input[type="text"],
        .form-group input[type="number"],
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input[type="text"]:focus,
        .form-group input[type="number"]:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: #3498db;
            outline: none;
        }

        .form-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .error-message {
            color: #e74c3c;
            text-align: center;
            margin: 20px 0;
            font-size: 1rem;
            padding: 12px;
            background-color: rgba(231, 76, 60, 0.1);
            border-radius: 8px;
            border-left: 5px solid #e74c3c;
        }

        /* 图片上传区域 - 调整为更紧凑 */
        .image-upload {
            border: 2px dashed #ddd;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
            margin-top: 20px;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .image-upload:hover {
            border-color: #3498db;
            background-color: #f8f9fa;
        }

        .image-upload i {
            font-size: 2.5rem;
            color: #95a5a6;
            margin-bottom: 10px;
        }

        .image-upload p {
            color: #7f8c8d;
            font-size: 14px;
        }

        .image-preview {
            margin-top: 15px;
            text-align: center;
            position: relative;
        }

        .image-preview img {
            max-width: 400px;
            max-height: 400px;
            border-radius: 8px;
        }

        .reupload-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .reupload-btn:hover {
            background-color: rgba(0, 0, 0, 0.9);
            transform: scale(1.1);
        }

        .upload-hint {
            font-size: 12px;
            color: #95a5a6;
            margin-top: 5px;
        }

        /* 价格输入样式 */
        .price-input {
            display: flex;
            align-items: center;
        }

        .price-input span {
            margin-right: 8px;
            font-size: 14px;
        }

        /* 按钮组样式 */
        .button-group {
            display: flex;
            gap: 12px;
            margin-top: 15px;
        }

        /* 提交按钮 */
        .submit-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 4px;
            cursor: pointer;
            flex: 1;
            transition: background-color 0.3s;
        }

        .submit-btn:hover {
            background-color: #c0392b;
        }

        /* 返回按钮 */
        .back-btn {
            background-color: #95a5a6;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 4px;
            cursor: pointer;
            flex: 1;
            transition: background-color 0.3s;
            text-align: center;
        }

        .back-btn:hover {
            background-color: #7f8c8d;
        }

        /* 删除按钮 */
        .delete-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 4px;
            cursor: pointer;
            flex: 1;
            transition: background-color 0.3s;
            text-align: center;
            margin-top: 10px;
        }

        /* 删除按钮 - 修改后的样式 */
        .delete-btn {
            background-color: #fff;
            color: #e74c3c;
            border: 2px solid #e74c3c;
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s;
            text-align: center;
            margin-top: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .delete-btn:hover {
            background-color: #e74c3c;
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .delete-btn i {
            font-size: 14px;
        }

        .footer {
            text-align: center;
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px 0;
            font-size: 14px;
            margin-top: auto;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .header .container {
                flex-direction: column;
            }

            .logo h1 {
                font-size: 1.8rem;
                justify-content: center;
                margin-bottom: 10px;
            }

            .user-menu ul {
                width: 100%;
                justify-content: space-around;
            }

            .user-menu li {
                margin-left: 0;
            }

            .button-group {
                flex-direction: column;
            }

            .image-preview img {
                max-width: 100%;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航栏（与发布页面一致） -->
<header class="header">
    <div class="container">
        <div class="logo">
            <a href="${pageContext.request.contextPath}/home"><h1><i class="fas fa-recycle"></i> 校园二手市场</h1></a>
        </div>
        <nav class="user-menu">
            <ul>
                <li>
                    <c:if test="${not empty user}">
                        <a href="${pageContext.request.contextPath}/userCenter"><i
                                class="fas fa-user"></i>&nbsp;${user.username}</a>
                    </c:if>
                    <c:if test="${empty user}">
                        <a href="${pageContext.request.contextPath}/login"><i class="fas fa-user"></i> 登录</a>
                    </c:if>
                </li>
                <li><a href="${pageContext.request.contextPath}/orderCar"><i class="fas fa-shopping-cart"></i> 购物车</a>
                </li>
                <li><a href="${pageContext.request.contextPath}/productCenter"><i class="fas fa-box-open"></i> 我的商品</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<c:if test="${not empty productErrorInfo}">
    <div class="error-message">${productErrorInfo}</div>
</c:if>

<c:if test="${not empty productSuccessInfo}">
    <div class="success-message">${productSuccessInfo}</div>
</c:if>

<!-- 商品修改表单 -->
<div class="container">
    <div class="upload-container">
        <h1 class="upload-title">修改商品信息</h1>
        <form id="productForm" action="${pageContext.request.contextPath}/productUpdate" method="post"
              enctype="multipart/form-data">
            <!-- 隐藏字段，传递商品ID -->
            <input type="hidden" name="productId" value="${product.productId}">

            <!-- 商品基本信息 -->
            <div class="form-group">
                <label for="title">商品标题 *</label>
                <input type="text" id="title" name="title" placeholder="请输入商品标题（最多100字）" required maxlength="100"
                       value="${product.title}">
            </div>

            <div class="form-group">
                <label for="categoryId">商品分类 *</label>
                <select id="categoryId" name="categoryId" required>
                    <option value="">-- 请选择分类 --</option>
                    <option value="1" ${product.categoryId == 1 ? 'selected' : ''}>教材书籍</option>
                    <option value="2" ${product.categoryId == 2 ? 'selected' : ''}>电子产品</option>
                    <option value="3" ${product.categoryId == 3 ? 'selected' : ''}>服装鞋帽</option>
                    <option value="4" ${product.categoryId == 4 ? 'selected' : ''}>交通工具</option>
                    <option value="5" ${product.categoryId == 5 ? 'selected' : ''}>生活用品</option>
                    <option value="6" ${product.categoryId == 6 ? 'selected' : ''}>文体娱乐</option>
                    <option value="7" ${product.categoryId == 7 ? 'selected' : ''}>其他商品</option>
                </select>
            </div>

            <!-- 图片上传 -->
            <div class="form-group">
                <label>商品图片</label>
                <div class="image-preview" id="currentImagePreview">
                    <img src="${pageContext.request.contextPath}/productPictures/${product.productId}/${product.imageUrl}"
                         alt="当前商品图片">
                    <p class="upload-hint">当前商品图片</p>
                </div>

                <div class="image-upload" id="imageUpload">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>点击上传新图片（可选）</p>
                    <input type="file" id="imageFile" name="imageFile" accept="image/*" style="display: none;">
                </div>
                <div class="image-preview" id="newImagePreview" style="display: none;">
                    <button type="button" class="reupload-btn" id="reuploadBtn" title="重新上传">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                    <img id="previewImage" src="#" alt="新预览图片">
                    <p class="upload-hint">点击右上角图标可重新上传图片</p>
                </div>
            </div>

            <!-- 价格信息 -->
            <div class="form-group">
                <label for="price">售价 *</label>
                <div class="price-input">
                    <span>¥</span>
                    <input type="number" id="price" name="price" min="0" step="0.01" placeholder="0.00" required
                           value="${product.price}">
                </div>
            </div>

            <div class="form-group">
                <label for="originalPrice">原价（可选）</label>
                <div class="price-input">
                    <span>¥</span>
                    <input type="number" id="originalPrice" name="originalPrice" min="0" step="0.01" placeholder="0.00"
                           value="${product.originalPrice}">
                </div>
            </div>

            <!-- 商品状态 -->
            <div class="form-group">
                <label for="conditionLevel">商品成色 *</label>
                <select id="conditionLevel" name="conditionLevel" required>
                    <option value="">-- 请选择商品成色 --</option>
                    <option value="1" ${product.conditionLevel == 1 ? 'selected' : ''}>全新</option>
                    <option value="2" ${product.conditionLevel == 2 ? 'selected' : ''}>几乎全新</option>
                    <option value="3" ${product.conditionLevel == 3 ? 'selected' : ''}>轻微使用痕迹</option>
                    <option value="4" ${product.conditionLevel == 4 ? 'selected' : ''}>明显使用痕迹</option>
                    <option value="5" ${product.conditionLevel == 5 ? 'selected' : ''}>需要维修</option>
                </select>
            </div>

            <!-- 商品描述 -->
            <div class="form-group">
                <label for="description">商品描述</label>
                <textarea id="description" name="description"
                          placeholder="请详细描述您的商品（功能、使用情况、瑕疵等）">${product.description}</textarea>
            </div>

            <!-- 按钮组 -->
            <div class="button-group">
                <button type="submit" class="submit-btn">保存修改</button>
                <a href="javascript:history.back()" class="back-btn">取消</a>
            </div>

            <!-- 删除按钮 -->
            <button type="button" class="delete-btn" id="deleteBtn">
                <i class="fas fa-trash-alt"></i> 删除商品
            </button>
        </form>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <p>&copy; 2025 CB 校园二手市场 版权所有</p>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 图片上传预览功能
    document.getElementById('imageUpload').addEventListener('click', function () {
        document.getElementById('imageFile').click();
    });

    document.getElementById('imageFile').addEventListener('change', function (e) {
        if (e.target.files.length > 0) {
            const file = e.target.files[0];
            if (!file.type.match('image.*')) {
                alert('请选择图片文件');
                return;
            }
            const reader = new FileReader();

            reader.onload = function (event) {
                document.getElementById('previewImage').src = event.target.result;
                document.getElementById('newImagePreview').style.display = 'block';
                document.getElementById('imageUpload').style.display = 'none';
            };

            reader.readAsDataURL(file);
        }
    });

    document.getElementById('reuploadBtn').addEventListener('click', function () {
        // 重置文件输入
        document.getElementById('imageFile').value = '';
        // 显示上传区域，隐藏预览容器
        document.getElementById('imageUpload').style.display = 'block';
        document.getElementById('newImagePreview').style.display = 'none';
    });

    // 表单验证
    document.getElementById('productForm').addEventListener('submit', function (e) {
        const price = parseFloat(document.getElementById('price').value);
        const originalPrice = parseFloat(document.getElementById('originalPrice').value) || 0;

        if (originalPrice > 0 && price > originalPrice) {
            alert('售价不能高于原价');
            e.preventDefault();
            return false;
        }

        if (price <= 0) {
            alert('售价必须大于0');
            e.preventDefault();
            return false;
        }

        return true;
    });

    // 删除商品确认
    document.getElementById('deleteBtn').addEventListener('click', function () {
        if (confirm('确定要删除这个商品吗？此操作不可恢复！')) {
            window.location.href = '${pageContext.request.contextPath}/productDeleteEver?id=${product.productId}';
        }
    });
</script>
</body>
</html>